<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="jquery.fly.min.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>商家菜品信息</title>
<style type="text/css">
        #di{
            width:500px;
            height:500px;
            overflow: scroll;
            position:absolute;
             top:50px;
             right:-500px;
            display:none;
        }
        #showbt{
             position:absolute;
             top:50px;
             right:0px;
        }
         .table th, .table td { 
            text-align: center;
            vertical-align: middle!important;
        }
      
        #showFood{
            width:150px;
            height:150px;
            position:relative;
           
            
        }
        ul li{
            display: inline;
            list-style:none;
            border: 1px solid red;
            float:left;
        }
           </style>
</head>
<body>
<div id="showFood">
	<h1><img src="${mufl.mUser.portrait }">
	<h1>商家名字：${mufl.mUser.name } 商家地址：${mufl.mUser.addr }</h1>
	<form method="post" action="ShowFoodByType">
	<input type="hidden" name="method" value="showFoodByType">
	    <select name="ftype">
	    	<option value="0" selected="selected">所有</option>
	    	<option value="1">酒水</option> 
	    	<option value="2">主食</option>
	    	<option value="3">小吃</option>
	    	<option value="4">套餐</option>
	   </select>
	   <select name="vegOrmer">
	    	<option value="0" selected="selected">商家</option>
	    	<option value="1" >菜</option>
	   </select>
	   <input type="hidden" name="mid" value="${mufl.mUser.id }">
	   <input type="submit" value="查找">
	  
	</form>
	<h1>
		<c:if test="${ftype=='1' }">酒水</c:if><c:if test="${ftype=='2' }">主食</c:if><c:if test="${ftype=='3' }">小吃</c:if><c:if test="${ftype=='4' }">套餐</c:if></h1>
		<table id="origin">
		<c:forEach items="${mufl.fList }" var="f">
			<tr>
				<td><img style="width:100px;height:100px;" src="${f.fimage }"/></td>	
				<c:if test="${f.ftype}="></c:if>
				<td>菜品名字：${f.fname}</td>	
				<td>菜品类型：${f.ftype}</td>
				<td>菜品价格：${f.fprice}</td>	
				<td><button id="${f.fname }" title="${f.fprice}"  class="add">购买</button></a></td>
			</tr>
		</c:forEach>
	</table>	
  </div>
  <button id="showbt" class="sidebar glyphicon glyphicon-shopping-cart">show</button>
	<div class="sidebar" id="di">
         <button id="hidebt" class="glyphicon glyphicon-circle-arrow-right">hide</button>
        <table id="cartTable" class="cart table table-condensed" >
     <thead id="thead">
         <tr>
             <th style="width:60px;"><label><input class="check-all check" type="checkbox" /> 全选</label></th>
             <th><label>食品</label></th>
             <th style="width:100px;"><label>单价</label></th>
             <th style="width:120px;"><label>数量</label></th>
             <th style="width:100px;"><label>小计</label></th>
             <th style="width:40px;"><label>操作</label></th> 
         </tr>
         </thead>
    </table>
    <table id="test">
    </table>

        <div class="row">
     <div class="col-md-12 col-lg-12 col-sm-12">
         <div style="border-top:1px solid gray;padding:4px 10px;">
             <div style="margin-left:20px;" class="pull-right total">
                <label>金额合计:<span class="currency">￥</span><span id="priceTotal" class="large-bold-red">0.00</span></label>
                 <div id="accounts">
                <span class="delete btn btn-xs btn-primary" style="float:right">结算</span>
             </div>
             </div>
             <div class="pull-right">
                <label>您选择了<span id="itemCount" class="large-bold-red" style="margin:0 4px;"></span>种产品型号，共计<span id="qtyCount" class="large-bold-red" style="margin:0 4px;"></span>件</label>
                 
             </div>
             
             <div class="pull-right selected" id="selected">
                <span id="selectedTotal"></span>
             </div>
         </div>
     </div>
 </div>  
    </div>
</body>
    <script type="text/javascript">
        $(function(){
             $("#hidebt").on("click",function(){
                
                $("#di").animate({right:"-500px"},300,'linear',callback);
             });
             
            $("#showbt").on("click",function(){
                $("#di").animate({right:"0px"},300,'linear',callback1);
                $("#showbt").hide();
             });

           
            
             function callback1(){
               $("#di").show();
                  $.ajax({
                    type:"GET",
                    url:"http://ZHA-ITA142-W7:3000/foods",
                    dataType:"json"
                })
                .done(function(msg){
                   var op = tableOperator($("table#test").attr("id","t"),msg)
                    op.createTable();
                })
             }
            
            function callback(){
                $("#showbt").show();
                $("#di").hide();
             }
            
            
            function tableOperator(table,data){
                var obj = [];
                var thead = $("#thead");
                obj.createTable=function(){
                    table.empty();
                    var tbody = $("<tbody>");
                    data.forEach((item,index)=>{
                        table.append(thead);
                        table.append(tbody);
                        var tr = $("<tr></tr)");
                        var td1 = $("<td></td>");
                        var td1_input = $("<input>").addClass("check-one").addClass("check").attr("type","checkbox");
                        td1.append(td1_input);
                        var td2 = $("<td></td>").addClass("goods");
                        var lable = $("<lable></lable>").text(item.name);
                        td2.append(lable);
                        var td3 = $("<td></td>").addClass("number").addClass("small-bold-red");
                        var td3_span = $("<span></span>").text(item.price);
                     
                        td3.append(td3_span);
                        
                        td4 = $("<td></td>").addClass("input-group")
                        var td4_span1 = $("<span></span>").addClass("input-group-addon").addClass("minus").addClass("btn").text("-");
                        td4_span1.on("click",function(){
                           update(td4_input,"1"); 
                           calSub(td4_input);
                               
                        });
                        td4.append(td4_span1);
                        
                        var td4_input = $("<input>").attr("type","text").addClass("number").addClass("form-control").addClass("input-sm").attr("value",item.count);
                        
                        td4.append(td4_input);
                        var td4_span2 = $("<span></span>").addClass("input-group-addon").addClass("plus").addClass("btn").text("+");
                        td4_span2.on("click",function(){
                            update(td4_input,"2"); 
                            calSub(td4_input);
                        })
                        td4.append(td4_span2);
                        
                        
                        
                        var td5 = $("<td></td>").addClass("subtotal").addClass("number").addClass("small-bold-red").text((item.price)*(item.count)) ;
                        var td6 = $("<td></td>").addClass("operation");
                        
                        var td6_span = $("<span></span>").addClass("delete").addClass("btn").addClass("btn-xs").addClass("btn-primary").text("删除").attr("id",index);
                        td6.append(td6_span);
                        tr.append(td1).append(td2).append(td3).append(td4).append(td5).append(td6);
                        tbody.append(tr);
                        td6.on("click",function(){
                            delItem(item.id,tr);
                        })
                        calSum();
                    })                   
                }                
                return obj;
            }
            
            function delItem(id,tr){
                $.ajax({
                    type:"DELETE",
                    url:"http://ZHA-ITA142-W7:3000/foods/"+id,
                    dataType:"json"
                })
                .done(function(msg){
                    tr.remove();
                   console.log("delete...");
                })
            }
            function update(input,type){
                    if(type == "1"){
                        
                        if(parseInt(input.val())==0){

                        }else{
                            $.ajax({
                                type:"GET",
                                url:"http://localhost:3000/foods?type=1",
                                dataType:"json"
                            })
                            .done(function(msg){
                               console.log
                            })
                            input.attr("value",parseInt(input.val())-1);
                        }                        
                    }else if(type=="2"){
                        $.ajax({
                                type:"GET",
                                url:"http://localhost:3000/foods?type=2",
                                dataType:"json"
                            })
                            .done(function(msg){
                               console.log
                            })
                        input.attr("value",parseInt(input.val())+1);
                    }  
            }
            //计算小结
            function calSub(input){
                let input_count = input.val();
                var text = input.parent().prev().text();
                input.parent().next().text(parseInt(input_count)*parseInt(text));
                calSum();
            }
            //计算所有
            function calSum(){
                var sum = 0;
                $(".subtotal").each(function(){
                    var tdSub = $(this).text();
                    sum += parseInt(tdSub);
                })
                $("#priceTotal").text(sum);
            }
            
            
            var offset = $(".sidebar").offset();
            
			$(".add").click(
					function(event) {
						var tdval=$(".productId").text();
						var addcar = $(this);
						
						var img = addcar.parent().find('img').attr('src');
						var flyer = $('<img class="u-flyer" src="'+img+'">');
						flyer.fly({
							start : {
								left : event.pageX, 
								top : event.pageY
							
							},
							end : {
								left : offset.left + 10,
								top : offset.top + 10,
								width : 0, 
								height : 0
                               
							
							},
							onEnd : function() { 
                                 
								$("#msg").show().animate({
									width : '250px'
								}, 200).fadeOut(1000); 
								addcar.css("cursor", "default").removeClass(
										'orange');
								//alert(tdval);
								this.destroy();
							}
						});
					});
			
		
				$(".add").on("click",function(){
					$.ajax({
                        type:"GET",
                        url:"http://localhost:CustomerSystem/add?foodName=",
                        dataType:"json"
                    })
                    .done(function(msg){
                       console.log
                    })
					
					
					
				});
			
			
        });
   
        
    </script>	
	
</body>
</html>